import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:raze/artifacts/auth_portal_dialog.dart';
import 'package:raze/lore/chronicle/user_chronicle.dart';
import 'package:raze/lore/chronicle/whisper_chronicle.dart';
import 'package:raze/potions/raze_constant.dart';
import 'package:raze/potions/spatial_alchemy.dart';

/// 用户导航栏组件
/// 可复用的顶部导航栏，包含用户信息和消息按钮
class UserNavBarWidget extends StatelessWidget {
  const UserNavBarWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final userChronicle = Get.find<UserChronicle>();
    final whisperChronicle = Get.find<WhisperChronicle>();

    return Obx(() {
      final currentUser = userChronicle.currentUser;
      final unreadCount =
          currentUser != null
              ? whisperChronicle.countTotalUnreadMessages(currentUser.id)
              : 0;

      return Padding(
        padding: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 12.h),
        child: Row(
          children: [
            // 左侧：头像
            GestureDetector(
              onTap: () {
                if (!userChronicle.isLoggedIn) {
                  AuthPortalDialog.revealAuthPortal();
                }
              },
              child: Container(
                width: 46.w,
                height: 46.w,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(color: RazeConstants.black, width: 2.w),
                ),
                child:
                    currentUser != null
                        ? ClipOval(
                          child: Image.asset(
                            currentUser.avatar,
                            width: 46.w,
                            height: 46.w,
                            fit: BoxFit.cover,
                          ),
                        )
                        : Icon(
                          Icons.person,
                          size: 26.sp,
                          color: RazeConstants.black,
                        ),
              ),
            ),
            12.w.boxWidth,
            // 中间：用户名和签名
            Expanded(
              child:
                  currentUser != null
                      ? Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(currentUser.username)
                              .applyTypeSize(20.sp)
                              .applyTypeColor(RazeConstants.black)
                              .applyBagelFatOne(weight: FontWeight.w400),
                          Text(currentUser.signature)
                              .applyTypeSize(10.sp)
                              .applyTypeColor(
                                RazeConstants.black.withOpacity(0.6),
                              )
                              .applyNotoSans(weight: FontWeight.w400),
                          6.h.boxHeight,
                        ],
                      )
                      : Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('Not Logged In')
                              .applyTypeSize(20.sp)
                              .applyTypeColor(RazeConstants.black)
                              .applyBagelFatOne(weight: FontWeight.w400),

                          Text('Tap to login')
                              .applyTypeSize(10.sp)
                              .applyTypeColor(
                                RazeConstants.black.withOpacity(0.6),
                              )
                              .applyNotoSans(weight: FontWeight.w400),
                          6.h.boxHeight,
                        ],
                      ),
            ),
            // 右侧：消息按钮
            Stack(
              clipBehavior: Clip.none,
              children: [
                Container(
                      width: 40.w,
                      height: 40.w,
                      decoration: BoxDecoration(
                        color: RazeConstants.background,
                        border: Border.all(
                          color: RazeConstants.black,
                          width: 1.5.w,
                        ),
                        borderRadius: BorderRadius.circular(6.r),
                      ),
                      child: Image.asset(
                        'assets/images/message.png',
                        width: 20.w,
                        height: 20.w,
                      ),
                    )
                    .withRightBottomShadow(thickness: 1)
                    .withTouchResonance(
                      onTap: () {
                        if (!userChronicle.isLoggedIn) {
                          AuthPortalDialog.revealAuthPortal();
                          return;
                        }
                        // 导航到消息列表页面
                        Get.toNamed('/message-list');
                      },
                    ),
                if (unreadCount > 0)
                  Positioned(
                    right: -6.w,
                    top: -6.w,
                    child: Container(
                      padding: EdgeInsets.symmetric(
                        horizontal: 2.w,
                        vertical: 2.h,
                      ),
                      decoration: BoxDecoration(
                        color: RazeConstants.lightBlue,
                        shape: BoxShape.circle,
                        border: Border.all(
                          color: RazeConstants.black,
                          width: 1.5.w,
                        ),
                      ),
                      constraints: BoxConstraints(
                        minWidth: 18.w,
                        minHeight: 18.w,
                      ),
                      child: Center(
                        child: Text(
                          unreadCount > 99 ? '99+' : unreadCount.toString(),
                          style: TextStyle(
                            color: RazeConstants.black,
                            fontSize: 10.sp,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ),
                    ),
                  ),
              ],
            ),
          ],
        ),
      );
    });
  }
}
